<template>
  <div class="steps-con">
    <div class="steps_c">
      <div class="title">
        <div class="left"><span class="t">{{ title }}</span></div>
        <div class="right" />
      </div>
      <div class="body">
        <steps :steps.sync="steps" :tps.sync="tps" :affair.sync="affair" />
      </div>
    </div>
  </div>
</template>
<script>
import image from 'assets/image/approval/system.png'
import steps from '@/components/approval/steps.vue'
export default {
  name: 'HomeIcons',
  components: {
    steps
  },
  props: {
    'steps': {
      type: Array,
      required: true
    }, 'title': {
      type: String,
      default: '流程'
    }, 'tps': {
      type: Object,
      default: {}
    },
    'affair': {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      showMoreVisble: false,
      list: [],
      user: {},
      image: image,
      showStepDetail: false,
      selectStep: { Template: { Remark: '', Files: [] }}
    }
  },
  computed: {
  },
  created() {
    this.initSteps
  },
  methods: {
    showMore: function(list) {
      this.list.splice(0, this.list.length, ...list)
      this.showMoreVisble = true
    },
    formatTime(time) {
      var date = time
      if (typeof (time) !== 'date') {
        date = new Date(time)
      }
      var Y = date.getFullYear()
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
      var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate())
      var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours())
      var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes())
      var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
      return Y + '-' + M + '-' + D + ' ' + h + ':' + m
    },
    stepClick(step) {
      if (step.Template && (step.Template.Remark || (step.Template.Files && step.Template.Files.length > 0)) && step.State != 'Doing') {
        this.selectStep = step
        this.showStepDetail = true
      }
    },
    initSteps() {
    }
  }
}
</script>
<style lang="scss" scoped>
.steps{
  .body{
    .step{
      display: flex;
      align-items:center;
      justify-content: space-between;
      //padding: @margin-yC 0;
      position: relative;
      z-index: 2;
      .bg-line{
        position: absolute;
        z-index: 1;
        height: 100%;
        width: 1PX;
        //background: @mainColor;
        //left: @icon-size-1 /2 ;
      }
      .img{
        position: relative;
        z-index: 2;
      }
      .content{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        //padding-right: @borderRadiusSmall;
        .body{
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          margin-top: 0;
          .time{
            //color:@fontColor2;
          }
          .state{
            //padding-top:@sectionMarginD;
            //color:@color-main;
          }
        }
         .more{
          position: absolute;
          right: -7PX;
          i{
            height:15PX;
            width: 10PX;
            //color:@fontColor2;
          }
        }
      }
    }
    .step:first-child{
      .bg-line{
        //top: @margin-yC;
      }
    }
    .step:last-child{
      .bg-line{
        //bottom: @margin-yC;
      }
    }
  }
}
.staff{
  //padding-bottom: @margin-yC;
}
.staff:last-child{
  padding-bottom: 0;
}
</style>
